import React, { PureComponent } from 'react';
//导入mobx的注入方法
import { Provider } from 'mobx-react';
import Styles from './mydata.scss';
import CONST from '@/inits/consts';
const LOGINDATA = CONST.LOGINDATA;
import imgobj from './img';

//引入自己封装的jwt工具类
import JWT from '@/utils/jwtutil';

class Mydata extends PureComponent<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      userData: { username: '游客' },
      show: true,
    };
  }
  getUserData = () => {
    let infos = localStorage.getItem('dbtoken')
      ? JWT.verify(localStorage.getItem('dbtoken'), LOGINDATA.KEY) //如果没有localStorage的值,解密也是失败
      : {};
    return infos;
  };
  handleOut = () => {
    localStorage.removeItem('dbtoken');
    // localStorage.removeItem('todos');
    window.location.replace(CONST.BASEURL);
  };
  handleChange = () => {
    // localStorage.removeItem('dbtoken');
    // localStorage.removeItem('todos');
    // window.location.replace(CONST.BASEURL);
    this.setState({ show: !this.state.show });
  };

  componentDidMount() {
    if (this.getUserData()?.decode?.sign) {
      this.setState({ userData: this.getUserData()?.decode?.sign });
    }
  }

  render() {
    const { username } = this.state.userData;
    return (
      <Provider>
        {this.state.show ? (
          <div className={Styles.mybox}>
            <div className={Styles.head_img}>
              <img src={imgobj()} alt="" />
            </div>
            <div>
              <span>{username}</span>
            </div>
            <div>
              <button onClick={this.handleChange}>修改资料</button>
              <button onClick={this.handleOut}>退出登录</button>
            </div>
          </div>
        ) : (
          <div>
            <button onClick={this.handleChange}>退出修改</button>
          </div>
        )}
      </Provider>
    );
  }
}

export default Mydata;
